<template>
<div class="i-class i-load-more" :class="[loading ? '' : 'i-load-more-line']">
    <div class="i-load-more-loading" v-if="loading"></div>
    <div class="i-load-more-tip">
        <div v-if="tip !== '' ">{{ tip }}</div>
        <div v-else-if="tip === '' && loading">正在加载</div>
        <div class="i-load-more-empty" v-else></div>
    </div>
</div>
</template>

<script>
export default {
  name: 'load-more',
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    tip: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  methods: {}
}
</script>

<style scoped>
  .i-load-more {
    width: 65%;
    margin: 1.5em auto;
    line-height: 1.6em;
    font-size: 14px;
    text-align: center;
  }
  .i-load-more-loading {
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background: 0 0;
    border-radius: 50%;
    border: 2px solid #e9eaec;
    border-color: #e9eaec #e9eaec #e9eaec #2d8cf0;
    animation: btn-spin 0.6s linear;
    animation-iteration-count: infinite;
  }
  .i-load-more-tip {
    display: inline-block;
    vertical-align: middle;
    color: #495060;
  }
  .i-load-more-line {
    border-top: 1px solid #dddee1;
    display: flex;
    border-top: 0;
  }
  .i-load-more-line::before {
    position: relative;
    top: -1px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    content: "";
    border-top: 1px solid #dddee1;
  }
  .i-load-more-line::after {
    position: relative;
    top: -1px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    content: "";
    border-top: 1px solid #dddee1;
  }
  .i-load-more-line .i-load-more-tip {
    position: relative;
    top: -0.9em;
    padding: 0 0.55em;
  }
  .i-load-more-empty {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #e5e5e5;
    display: inline-block;
    position: relative;
    vertical-align: 0;
    top: -0.16em;
  }
  @keyframes btn-spin {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
